<template>
	<view class="page flex-center1">
		<view>
			<view style="margin-bottom: 50rpx">
				<image src="@/static/login/back2.png" style="width: 112rpx; height: 112rpx; margin-bottom: 44rpx"></image>
				<view style="position: relative">
					<view style="font-weight: 100; font-size: 56rpx; color: #242424">
						欢迎来到，
						<text style="font-weight: bold">天天好活！</text>
					</view>
					<view style="position: absolute; left: 280rpx; bottom: 0; width: 252rpx; height: 20rpx; background: rgba(19, 101, 249, 0.1)"></view>
				</view>
			</view>
			<view style="margin-bottom: 80rpx">
				<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
					<input type="text" v-model="form.name" placeholder="请输入手机号" style="padding: 30rpx 0; font-weight: 400; font-size: 28rpx" />
				</view>
				<view class="flex-between1" style="border-bottom: 1rpx solid #eeeeee">
					<input type="text" v-model="form.code" placeholder="请输入验证码" style="padding: 30rpx 0; font-weight: 400; font-size: 28rpx" />
					<view v-if="form.flag" @click="getyanzheng" style="font-weight: 600; font-size: 28rpx; color: #1365f9">获取验证码</view>
					<view v-else style="font-weight: 600; font-size: 28rpx; color: #1365f9">{{ form.daojishi }}</view>
				</view>
			</view>
			<view class="flex-center1" style="margin-bottom: 35rpx">
				<view
					@click="login"
					class="flex-center1"
					style="width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff"
				>
					登录
				</view>
			</view>
			<view class="flex-center1" style="font-weight: 400; font-size: 28rpx; color: #333333; margin-bottom: 100rpx">本机号码一键登录</view>
			<view class="align-center">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
					<u-checkbox shape="circle" size="35" name="1"></u-checkbox>
				</u-checkbox-group>
				<view>
					<text style="font-weight: 400; font-size: 24rpx; color: #aaaaaa">我已阅读并同意</text>
					<text style="font-weight: 400; font-size: 24rpx; color: #1365f9">《一键登录服务协议》和《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			checkboxValue: [],
			checked: false,
			form: {
				name: '',
				code: '',
				daojishi: '',
				flag: true
			},
			tips: '',
			// refCode: null,
			seconds: 10
		};
	},
	methods: {
		checkboxChange(n) {
			if (n.length > 0) {
				this.checked = true;
			} else {
				this.checked = false;
			}
		},
		getyanzheng() {
			const phonetest = /^1[3-9]\d{9}$/;
			if (!phonetest.test(this.form.name)) return this.$tools.toast('请输入正确手机号');
			if (!this.checked) return this.$tools.toast('请阅读并勾选一键登录协议和隐私政策');
			this.form.daojishi = 60;
			this.form.flag = false;
			const timer = setInterval(() => {
				this.form.daojishi--;
				if (this.form.daojishi == 0) {
					this.form.flag = true;
					clearInterval(timer);
				}
			}, 1000);
			const data = { account: this.form.name };
			this.$request('front/authCode/sendCode', data).then((res) => {
				console.log(res.obj, 'data');
				this.$tools.toast('发送成功');
			});
		},
		login() {
			if (!this.form.code) return this.$tools.toast('请输入验证码');
			if (!this.checked) return this.$tools.toast('请阅读并勾选一键登录协议和隐私政策');
			const data = { name: this.form.name, code: this.form.code };
			this.loading = true;
			this.$request('front/codeLogin', data).then((res) => {
				console.log(res, 'res');
				this.loading = false;
				if (res.code == 0) {
					this.$tools.toast('登录成功');
					uni.setStorageSync('token', res.obj);
					this.$store.commit('login', true);
					this.$tools.navigiteTo('/pages/index/index');
				} else {
					this.$tools.toast('登录失败');
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.page {
	padding: 0 50rpx;
	height: 100vh;
}
</style>
